<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>科大教育————课程详情</title>
		<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/homepage.css" />
		<link rel="stylesheet" type="text/css" href="../css/course-content.css" />
		<link rel="stylesheet" type="text/css" href="../css/abroad.css" />
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="../js/jquery-3.4.1.min.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="../bootstrap/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div id="content" class="container" style=" padding-top: 40px;">
			<p class="head-p">
				首页.A-LEVEL&nbsp;
				A-LEVEL数学公开课&nbsp;
				尤静&nbsp;
			</p>
			<!-- 第一行 -->
			<div class="row lesson">
				<div class="col-lg-7 col-md-6  col-xs-12 lesson-live">
					<img class="img-responsive" src="../img/ic_finish.png">
				</div>
				<div class="col-lg-5 col-md-6 col-xs-12 lesson-other">
					<p class="lesson-title">A-LEVEL数学公开课&nbsp;&nbsp;&nbsp;尤静</p>
					<div class="fivestar col-xs-12">
						<img class="lesson-star" src="../img/ic_star.png">
						<img class="lesson-star" src="../img/ic_star.png">
						<img class="lesson-star" src="../img/ic_star.png">
						<img class="lesson-star" src="../img/ic_star.png">
						<img class="lesson-star" src="../img/ic_star.png">
					</div>
					<p class="col-xs-12" style="font-size: 18px;color: #BBBBBB;text-align: center; line-height: 80px;">7 位同学给出了优质的评价</p>
					<p style="color: #999999; font-size: 18px; margin-left:20px;">价格
						<span style="color: #00925D; font-size: 24px; ">免费</span>
					</p>
					<div class="button-group">
						<button type="button" class="btn btn-collect"><a href="##">收藏课程</a></button>
						<button type="button" id="showcontent" class="btn btn-join"><a href="##">加入学习</a></button>
					</div>
					<div class="lesson-footer">
						<p>浏览量&nbsp;&nbsp;<span>805人</span></p>
						<div class="">
							<a href=""><img src="../img/ic_share.png" class="lesson-share"></a>
							<span>分享</span>
						</div>
						<div class="">
							<a href="##"><img src="../img/ic_Qrcode.png" class="lesson-share"></a>
							<span>二维码</span>
						</div>

					</div>
				</div>
			</div>
			<br />
			<!-- 第二行 -->
			<div class="row" style=" height: 480px;">
				<div class="col-lg-10 col-md-10 col-xs-12" style="background-color: #FFFFFF; ">
					<ul class="nav navbar-nav lesson-nav">
						<li><a href="##">课程概览</a></li>
						<li><a href="##">课时</a></li>
						<li><a href="##">评价（7）</a></li>
						<li><a href="##">笔记（3）</a></li>
						<li><a href="##">讨论区</a></li>
						<li><a href="##">资料区</a></li>
					</ul>
					<div style="border : 1px dashed #666666; margin-top: 60px;"></div>
					<div style="height: 160px; padding-left: 30px;">
						<br />
						<br />
						<span>暂无课程介绍</span>
					</div>
					<div style="border : 8px solid #F9F9F9; margin-top: 60px; margin: 0 -15px"></div>
					<div class="row" style="background-color: #FFFFFF; height: 200px;margin-top: 10px;">
						<div style="padding: 25px 0;">
							<div class="col-xs-7 col-xs-offset-1">
								<span style="color: #999999;">教授讲师</span>
							</div>
							<div class="col-xs-4">
								<span style="color: #999999;">最新学员</span>
							</div>
						</div>
						<div style="border: 1px solid #F0F0F0; margin-top:  20px;"></div>

						<ul class="list-group col-xs-12" style="list-style: none; margin-top: 25px;">
							<li class="col-lg-3 col-xs-3  col-md-3 abroad-circle">
								<div class="" style="height: 60px; width: 60px; border-radius: 50%; background-color: #7F7F7F;"></div>
								<span style="font-size: 28px;color: #333333; line-height:  60px; margin-left: 10px;">尤静</span>
							</li>
							<li class="col-lg-5 col-xs-9  col-md-6 col-md-offset-3  col-lg-offset-4">
								<div class="abroad-circle" style="justify-content: space-between; ">
									<div class="" style="height: 60px; width: 60px; border-radius: 50%; background-color: #7F7F7F;"></div>
									<div class="" style="height: 60px; width: 60px; border-radius: 50%; background-color: #7F7F7F;"></div>
									<div class="" style="height: 60px; width: 60px; border-radius: 50%; background-color: #7F7F7F;"></div>
									<div class="" style="height: 60px; width: 60px; border-radius: 50%; background-color: #7F7F7F;"></div>
									<div class="" style="height: 60px; width: 60px; border-radius: 50%; ">
										<img src="../img/ic_circle4.png" height="60px" width="60px">
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-lg-2 col-md-2 col-xs-12 lesson-qingdao" style="background-color: #FFFFFF;">
					<div style="display: flex;flex-direction: row;justify-content: space-between;">
						<span>推荐培诺班级</span>
						<span>--</span>
					</div>
					<div style="height: 320px; width: 95%; margin-left: 3%; background-color: #7F7F7F; border-radius:12px;margin-top: 20px;">
					</div>
					<p style="margin-top: 20px;">
						<span>青岛14秋季班</span>
					</p>
				</div>
			</div>
			<!-- 第三行 -->
			<div class="row" style="background-color: #F9F9F9;  height: 300px; ">
				<span class="col-xs-12" style="color: #666666; font-size: 18px; padding-left: 50px;">相关课程</span>
				<ul class="list-group" style="list-style: none; margin-top: 20px;">
					<li class="col-lg-3 col-sm-6 col-xs-12" style="margin-top: 20px;">
						<div class="all-class">
							<div class="all-class-top"></div>
							<div class="all-class-foot">
								<p>
									M2真题
									<span style="margin-left: 30px;color: #333333;font-size: 16px;">程丽</span>
								</p>
								<div class="all-class-img">
									<span>
										<img src="../img/ic_people2.png" class="all-class-imgs">
										60
									</span>
									<span>
										<img src="../img/ic_msg2.png" class="all-class-imgs">
										14
									</span>
									<span class="all-class-price-span">
										600.00
										<img src="../img/ic_money.png" class="all-class-price-img">
									</span>
								</div>
							</div>
						</div>
					</li>
					<li class="col-lg-3 col-sm-6 col-xs-12" style="margin-top: 20px;">
						<div class="all-class">
							<div class="all-class-top">
								<img src="../img/ic_finish.png">
							</div>
							<div class="all-class-foot">
								<p>
									M2真题
									<span style="margin-left: 30px;color: #333333;font-size: 16px;">程丽</span>
								</p>
								<div class="all-class-img">
									<span>
										<img src="../img/ic_people2.png" class="all-class-imgs">
										60
									</span>
									<span>
										<img src="../img/ic_msg2.png" class="all-class-imgs">
										14
									</span>
									<span class="all-class-price-span">
										600.00
										<img src="../img/ic_money.png" class="all-class-price-img">
									</span>
								</div>
							</div>
						</div>
					</li>
					<li class="col-lg-3 col-sm-6 col-xs-12" style="margin-top: 20px;">
						<div class="all-class">
							<div class="all-class-top"></div>
							<div class="all-class-foot">
								<p>
									M2真题
									<span style="margin-left: 30px;color: #333333;font-size: 16px;">程丽</span>
								</p>
								<div class="all-class-img">
									<span>
										<img src="../img/ic_people2.png" class="all-class-imgs">
										60
									</span>
									<span>
										<img src="../img/ic_msg2.png" class="all-class-imgs">
										14
									</span>
									<span class="all-class-price-span">
										600.00
										<img src="../img/ic_money.png" class="all-class-price-img">
									</span>
								</div>
							</div>
						</div>
					</li>
					<li class="col-lg-3 col-sm-6 col-xs-12" style="margin-top: 20px;">
						<div class="all-class">
							<div class="all-class-top"></div>
							<div class="all-class-foot">
								<p>
									M2真题
									<span style="margin-left: 30px;color: #333333;font-size: 16px;">程丽</span>
								</p>
								<div class="all-class-img">
									<span>
										<img src="../img/ic_people2.png" class="all-class-imgs">
										60
									</span>
									<span>
										<img src="../img/ic_msg2.png" class="all-class-imgs">
										14
									</span>
									<span class="all-class-price-span">
										600.00
										<img src="../img/ic_money.png" class="all-class-price-img">
									</span>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>


		<!-- 加入学习小弹窗 -->
		<div class="join-class hidden-xs " id="dialog" style="display: none;">
			<div class="join-class-top">
				<span style="font-size: 16px;color: #999999;">加入学习</span>
				<div class="">
					<img src="../img/ic_light.png">
					<span style="font-size: 14px;color: #00925D;">此课程为免费课程，无需购买，可直接加入学习</span>
				</div>
				<a href="##"><span id="span-close" class="glyphicon glyphicon-remove"></span></a>
			</div>
			<br />
			<div style="border: 1px dashed #0F0F0F;"></div>
			<br />
			<div style="padding-left: 10%;">
				<span style="font-size: 16px;line-height: 40px;">课程名称</span>
				<span style="font-size: 20px; color: #333333; line-height: 40px; margin-left: 17%;">《A-LEVEL数学公开课 尤静》</span>
			</div>
			<div style="padding-left: 10%;">
				<span style="font-size: 16px;line-height: 30px; line-height: 40px;">讲师</span>
				<span style="font-size: 20px; color: #666666; line-height: 40px;  margin-left: 23%;">尤静</span>
			</div>

			<div class="join-class-top" style="padding-left: 10%;">
				<span style="font-size: 16px;line-height: 30px; line-height: 40px;">手机号码</span>
				<span style="font-size: 20px; color: #666666; line-height: 40px;">1234567891
					<span style="font-size: 16px;color: #00925D;">(已绑定)</span>
				</span>
				<button type="button" class="btn join-class-btn">加入学习</button>

			</div>
			<br />
			<div style="border: 1px solid #E5E5E5;"></div>
			<br />
			<span style="font-size: 16px; color: #BBBBBB;padding-left: 5%;">温馨提示 : 如果您的资料有变更，请在此修改，以便更好的为您服务！</span>
		</div>
		<script src="../js/course-content.js" type="text/javascript"></script>
	</body>
</html>
